<template>
  <div id="user-container">
    <!-- 头部卡片 -->
    <el-card class="head-card"
      ><el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        ref="searchForm"
      >
        <el-form-item label="用户名称" prop="username">
          <el-input
            v-model="formInline.username"
            class="short-input num-input"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" prop="email">
          <el-input v-model="formInline.email" class="name-input"></el-input>
        </el-form-item>

        <el-form-item label="角色" prop="role_id">
          <el-select v-model="formInline.role_id" placeholder="请选择状态">
            <el-option label="全部" value=""></el-option>
            <el-option label="管理员" value="2"></el-option>
            <el-option label="老师" value="3"></el-option>
            <el-option label="学生" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchCom">搜索</el-button>
          <el-button @click="removeSearch">清除</el-button>
          <el-button type="primary" icon="el-icon-plus" @click="openDialog(0)">
            新增用户</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 主体卡片 -->
    <el-card>
      <el-table :data="tableData" style="width: 100%" class="my-table" border>
        <el-table-column type="index" label="序号" width="120px">
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="180px">
        </el-table-column>
        <el-table-column prop="phone" label="电话" width="auto">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="auto">
        </el-table-column>
        <el-table-column prop="role" label="角色" width="auto">
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="auto">
        </el-table-column>
        <el-table-column label="状态" width="auto">
          <template v-slot="scope">
            <span v-if="scope.row.status === 1">启用</span>
            <span v-else class="active">禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="260px">
          <template v-slot="scope">
            <el-button type="text" @click="openDialog(1, scope.row)"
              >编辑</el-button
            >
            <el-button type="text" @click="changeComStatus(scope.row)">{{
              scope.row.status === 0 ? '启用' : '禁用'
            }}</el-button>
            <el-button type="text" @click="removeUserBTN(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        background
        class="my-page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <userDialog ref="userDialog" @successComDialog="getList"></userDialog>
  </div>
</template>

<script>
// 导入接口文件
import { userList, statusUser, removeUser } from '../../../api/user.js'

// 导入dailog
import userDialog from './userDialog'

export default {
  name: 'user',
  components: {
    userDialog
  },
  data () {
    return {
      // 头部卡片数据
      formInline: {
        email: '',
        username: '',
        role_id: ''
      },
      // 主体表格数据
      tableData: [],
      // 分页器数据
      currentPage: 1,
      total: 66,
      pageSizes: [2, 4, 6, 8, 10],
      pageSize: 6
    }
  },

  created () {
    this.getList()
  },
  methods: {
    // 删除按钮
    removeUserBTN (item) {
      this.$confirm('此操作删除该, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          removeUser({ id: item.id }).then(() => {
            // console.log(res)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 清除搜索按钮
    removeSearch () {
      this.$refs.searchForm.resetFields()
      this.getList()
    },
    // 搜索按钮
    searchCom () {
      this.getList()
    },
    // 新增用户
    openDialog (n, item) {
      this.$refs.userDialog.dialogFormVisible = true
      this.$refs.userDialog.addOrEdit = n
      if (n === 1) {
        this.$refs.userDialog.form = { ...item }
      }
    },
    // 切换状态按钮
    changeComStatus (item) {
      // console.log(item)
      statusUser({
        id: item.id
      }).then(() => {
        // 成功则重新渲染页面
        this.$message.success('修改成功')
        this.getList()
      })
    },
    // 获取数据
    getList () {
      userList({
        page: this.currentPage,
        limit: this.pageSize,
        ...this.formInline
      }).then(res => {
        console.log(res)
        this.tableData = res.data.data.items
        this.total = res.data.data.pagination.total
      })
    },
    // 页容量控制
    handleSizeChange (val) {
      // 修改页容量
      // console.log(`每页 ${val} 条`)
      // 要回到第一页
      this.currentPage = 1
      // 修改容量
      this.pageSize = val
      this.getList()
    },
    // 页码控制
    handleCurrentChange (val) {
      // 切换当前页码
      // console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getList()
    }
  }
}
</script>

<style lang="less">
#user-container {
  .head-card {
    margin-bottom: 20px;
    .el-form--inline .el-form-item__label {
      font-family: Microsoft YaHei Regular;
      color: #7a7c7f;
      font-weight: bold;
    }
    .el-button {
      i {
        font-size: 16px;
        font-weight: bold;
      }
      span {
        font-family: Microsoft YaHei Regular;
        font-weight: bold;
      }
    }
    .el-form {
      .el-form-item {
        margin-top: 11px;
        margin-bottom: 11px;
      }
    }
  }

  .my-table {
    margin-bottom: 30px;
    thead .cell {
      font-family: Microsoft YaHei Regular;
      color: #7a7c7f;
      font-weight: bold;
    }
    tbody {
      .cell {
        font-family: Microsoft YaHei Regular;
        color: #5a5d62;
        font-weight: bold;
        span {
          font-family: Microsoft YaHei Regular;
          font-weight: bold;
        }
      }
    }
  }

  .my-page {
    text-align: center;
  }
  span.active {
    color: red;
  }
  .short-input {
    width: 100px;
  }
}
</style>
